<template>
  <div class="container-fans">
    <el-card>
      <div slot="header">
        <my-bread>粉丝管理</my-bread>
      </div>
      <!-- 标签页组件 el-tabs -->
      <el-tabs v-model="activeName" type="card">
        <el-tab-pane label="粉丝列表" name="list">
          <!-- 列表 -->
          <div class="fans-list">
            <!-- key必须使用 字符串/数字  item.id是对象（json-bigint转换的） -->
            <div class="fans-item" v-for="item in fans" :key="item.id.toString()">
              <el-avatar :size="80" :src="item.photo"></el-avatar>
              <p>{{item.name}}</p>
              <el-button type="primary" size="small" plain>+ 关注</el-button>
            </div>
          </div>
          <!-- 分页 -->
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="reqParams.per_page"
            :current-page="reqParams.page"
            @current-change="changePager"
          ></el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="img">
          <div ref="bar" style="width:600px;height:400px"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// 导入 echarts
import echarts from 'echarts'
export default {
  name: 'page-fans',
  data () {
    return {
      activeName: 'img',
      // 请求参数
      reqParams: {
        page: 1,
        per_page: 24
      },
      // 粉丝列表
      fans: [],
      // 总条数
      total: 0
    }
  },
  created () {
    this.getFans()
  },
  // 这个函数执行的时候，dom元素才渲染完毕
  mounted () {
    this.initBar()
  },
  methods: {
    // 初始化echarts的柱状图
    async initBar () {
      try {
      // 初始化echarts
        const myChart = echarts.init(this.$refs.bar)
        // 定义图表配置
        const option = {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              // x轴的刻度数据
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              // x轴刻度对应的数据
              data: [10, 52, 200, 334, 390, 330, 220]
            }
          ]
        }

        // 获取数据，给option数据赋值
        const res = await this.$http.get('statistics/followers')
        // console.log(res.data.data.age) {le18: 62, le23: 60, le30: 71, le40: 84, le50: 99, …}
        const obj = res.data.data.age
        const xAxisData = []
        const seriesData = []
        for (const key in obj) {
          xAxisData.push(key)
          seriesData.push(obj[key])
        }
        option.xAxis[0].data = xAxisData
        option.series[0].data = seriesData
        // 使用这个配置
        myChart.setOption(option)
      } catch (e) {
        this.$message.error('网络不稳定，请刷新下试试')
      }
    },
    // 分页
    changePager (newPage) {
      this.reqParams.page = newPage
      this.getFans()
    },
    // 获取粉丝列表
    async getFans () {
      const {
        data: { data }
      } = await this.$http.get('followers', { params: this.reqParams })
      this.fans = data.results
      this.total = data.total_count
    }
  }
}
</script>

<style scoped lang='less'>
.fans-list {
  .fans-item {
    width: 100px;
    height: 170px;
    border: 1px dashed #ddd;
    display: inline-block;
    margin-right: 40px;
    margin-bottom: 20px;
    text-align: center;
    padding-top: 10px;
    p {
      margin: 10px;
      font-size: 14px;
    }
  }
}
</style>
